<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/ico" />

    <title>Inbox - Gentelella</title>

    <!-- Vite Entry Point with inbox functionality -->
    <script type="module" src="/src/main-inbox.js"></script>
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
              <a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
            </div>

            <div class="clearfix"></div>

            <!-- menu profile quick info -->
            <div class="profile clearfix">
              <div class="profile_pic">
                <img src="images/img.jpg" alt="..." class="img-circle profile_img">
              </div>
              <div class="profile_info">
                <span>Welcome,</span>
                <h4>John Doe</h4>
              </div>
            </div>
            <!-- /menu profile quick info -->

            <br />

            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
              <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="index.html">Dashboard 1</a></li>
                      <li><a href="index2.html">Dashboard 2</a></li>
                      <li><a href="index3.html">Dashboard 3</a></li>
                      <li><a href="index4.html">Dashboard 4</a></li>
                    </ul>
                  <li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="form.html">General Form</a></li>
                      <li><a href="form_advanced.html">Advanced Components</a></li>
                      <li><a href="form_validation.html">Form Validation</a></li>
                      <li><a href="form_wizards.html">Form Wizard</a></li>
                      <li><a href="form_upload.html">Form Upload</a></li>
                      <li><a href="form_buttons.html">Form Buttons</a></li>
                    </ul>
                  <li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="general_elements.html">General Elements</a></li>
                      <li><a href="media_gallery.html">Media Gallery</a></li>
                      <li><a href="typography.html">Typography</a></li>
                      <li><a href="icons.html">Icons</a></li>
                      <li><a href="widgets.html">Widgets</a></li>
                      <li><a href="invoice.html">Invoice</a></li>
                      <li><a href="inbox.html">Inbox</a></li>
                      <li><a href="calendar.html">Calendar</a></li>
                    </ul>
                  <li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="tables.html">Tables</a></li>
                      <li><a href="tables_dynamic.html">Table Dynamic</a></li>
                    </ul>
                  <li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="chartjs.html">Chart JS</a></li>
                      <li><a href="chartjs2.html">Chart JS2</a></li>
                      <li><a href="chart3.html">Chart JS3</a></li>
                      <li><a href="echarts.html">ECharts</a></li>
                      <li><a href="other_charts.html">Other Charts</a></li>
                    </ul>
                  <li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
                      <li><a href="fixed_footer.html">Fixed Footer</a></li>
                    </ul>
                </ul>
              </div>
              <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="e_commerce.html">E-commerce</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="project_detail.html">Project Detail</a></li>
                      <li><a href="contacts.html">Contacts</a></li>
                      <li><a href="profile.html">Profile</a></li>
                    </ul>
                  <li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="page_403.html">403 Error</a></li>
                      <li><a href="page_404.html">404 Error</a></li>
                      <li><a href="page_500.html">500 Error</a></li>
                      <li><a href="plain_page.html">Plain Page</a></li>
                      <li><a href="login.html">Login Page</a></li>
                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    </ul>
                  <li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#level1_1">Level One</a></li>
                        <li><a>Level One<span class="fas fa-chevron-down"></span></a>
                          <ul class="nav child_menu">
                            <li class="sub_menu"><a href="level2.html">Level Two</a>
                            <li><a href="#level2_1">Level Two</a>
                            <li><a href="#level2_2">Level Two</a>
                          </ul>
                        <li><a href="#level1_2">Level One</a></li>
                    </ul>
                  <li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a></li>
                </ul>
              </div>

            </div>
            <!-- /sidebar menu -->

            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
                <span class="fas fa-cog" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
                <span class="fas fa-expand" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
                <span class="fas fa-eye-slash" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
                <span class="fas fa-power-off" aria-hidden="true"></span>
              </a>
            </div>
            <!-- /menu footer buttons -->
          </div>
        </div>

        <!-- top navigation -->
        <div class="top_nav">
            <div class="nav_menu">
                <div class="nav toggle">
                  <a id="menu_toggle"><i class="fas fa-bars"></i></a>
                </div>
                <nav class="nav navbar-nav">
                <ul class="navbar-right">
                  <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                      <img src="images/img.jpg" alt="">John Doe
                    </a>
                    <div class="dropdown-menu dropdown-usermenu float-end" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item"  href="javascript:;"> Profile</a>
                        <a class="dropdown-item"  href="javascript:;">
                          <span class="badge bg-danger float-end">50%</span>
                          <span>Settings</span>
                        </a>
                    <a class="dropdown-item"  href="javascript:;">Help</a>
                      <a class="dropdown-item"  href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
                    </div>
  
                  <li role="presentation" class="nav-item dropdown open">
                    <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="fas fa-envelope"></i>
                      <span class="badge bg-success">6</span>
                    </a>
                    <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <div class="text-center">
                          <a class="dropdown-item">
                            <strong>See All Alerts</strong>
                            <i class="fas fa-angle-right"></i>
                          </a>
                        </div>
                    </ul>
                </ul>
              </nav>
            </div>
          </div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">

            <div class="page-title">
              <div class="title_left">
                <h3>Inbox <small>Professional email interface</small></h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 mb-3 float-end top_search">
                  <div class="input-group search-bar-fix">
                    <input type="text" class="form-control" placeholder="Search emails...">
                    <button class="btn btn-outline-secondary" type="button">
                      <i class="fas fa-search"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Inbox <small>Email Management</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Settings 1</a>
                            <a class="dropdown-item" href="#">Settings 2</a>
                          </div>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                      <div class="col-sm-3 mail_list_column">
                        <div class="d-grid gap-2 mb-3">
                          <button id="compose" class="btn btn-success" type="button">
                            <i class="fas fa-plus"></i> COMPOSE
                          </button>
                        </div>
                        
                        <div class="mail-list-container">
                          <a href="#" class="mail-item">
                            <div class="mail_list">
                              <div class="left">
                                <i class="fas fa-circle text-primary"></i> 
                                <i class="fas fa-edit text-muted"></i>
                              </div>
                              <div class="right">
                                <h3>Sarah Wilson <small class="text-muted">3:00 PM</small></h3>
                                <p>Quarterly report review meeting scheduled for next week. Please review the attached documents...</p>
                              </div>
                            </div>
                          </a>
                          
                          <a href="#" class="mail-item active">
                            <div class="mail_list">
                              <div class="left">
                                <i class="fas fa-star text-warning"></i>
                              </div>
                              <div class="right">
                                <h3>Jane Nobert <small class="text-muted">4:09 PM</small></h3>
                                <p><span class="badge bg-primary">To</span> Project milestone updates and deliverables discussion for Q2 planning...</p>
                              </div>
                            </div>
                          </a>
                          
                          <a href="#" class="mail-item">
                            <div class="mail_list">
                              <div class="left">
                                <i class="far fa-circle text-muted"></i>
                                <i class="fas fa-paperclip text-secondary"></i>
                              </div>
                              <div class="right">
                                <h3>Michael Chen <small class="text-muted">4:09 PM</small></h3>
                                <p><span class="badge bg-secondary">CC</span> Design mockups and prototype feedback for the new dashboard interface...</p>
                              </div>
                            </div>
                          </a>
                          
                          <a href="#" class="mail-item">
                            <div class="mail_list">
                              <div class="left">
                                <i class="fas fa-paperclip text-secondary"></i>
                              </div>
                              <div class="right">
                                <h3>Jon Dibbs <small class="text-muted">4:09 PM</small></h3>
                                <p>Technical documentation updates and API integration guidelines for development team...</p>
                              </div>
                            </div>
                          </a>
                          
                          <a href="#" class="mail-item">
                            <div class="mail_list">
                              <div class="left">
                                <i class="far fa-circle text-muted"></i>
                              </div>
                              <div class="right">
                                <h3>Team Meeting <small class="text-muted">5:15 PM</small></h3>
                                <p>Weekly standup meeting notes and action items for the upcoming sprint planning...</p>
                              </div>
                            </div>
                          </a>
                          
                          <a href="#" class="mail-item">
                            <div class="mail_list">
                              <div class="left">
                                <i class="far fa-circle text-muted"></i>
                              </div>
                              <div class="right">
                                <h3>Marketing Team <small class="text-muted">6:30 PM</small></h3>
                                <p>Campaign performance metrics and ROI analysis for the latest product launch...</p>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <!-- /MAIL LIST -->

                      <!-- CONTENT MAIL -->
                      <div class="col-sm-9 mail_view">
                        <div class="inbox-body">
                          <div class="mail_heading row">
                            <div class="col-md-8">
                              <div class="btn-group" role="group" aria-label="Email actions">
                                <button class="btn btn-sm btn-primary" type="button"><i class="fas fa-reply"></i> Reply</button>
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-placement="top" data-bs-toggle="tooltip" title="Forward"><i class="fas fa-share"></i></button>
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-placement="top" data-bs-toggle="tooltip" title="Print"><i class="fas fa-print"></i></button>
                                <button class="btn btn-sm btn-outline-danger" type="button" data-bs-placement="top" data-bs-toggle="tooltip" title="Delete"><i class="fas fa-trash"></i></button>
                              </div>
                            </div>
                            <div class="col-md-4 text-end">
                              <p class="date text-muted">8:02 PM 12 FEB 2032</p>
                            </div>
                            <div class="col-md-12">
                              <h4 class="email-subject">Project Milestone Updates and Q2 Planning Discussion</h4>
                            </div>
                          </div>
                          
                          <div class="sender-info">
                            <div class="row">
                              <div class="col-md-12">
                                <div class="d-flex align-items-center gap-2 mb-3">
                                  <img src="images/img.jpg" alt="Jane Nobert" class="rounded-circle" style="width: 40px; height: 40px;">
                                  <div>
                                    <strong>Jane Nobert</strong>
                                    <span class="text-muted">(jane.nobert@company.com)</span> to
                                    <strong>me</strong>
                                    <a class="sender-dropdown text-muted ms-2"><i class="fas fa-chevron-down"></i></a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                          <div class="view-mail">
                            <p>Hi there,</p>
                            <p>I hope this email finds you well. I wanted to reach out regarding our upcoming Q2 planning session and provide you with an update on our current project milestones.</p>
                            <p>As we approach the end of Q1, it's crucial that we review our progress and align our objectives for the next quarter. The development team has made significant strides in implementing the new features, and we're on track to meet our delivery deadlines.</p>
                            <p>Key accomplishments this quarter include:</p>
                            <ul>
                              <li>Successfully launched the user dashboard redesign</li>
                              <li>Implemented advanced analytics features</li>
                              <li>Improved system performance by 35%</li>
                              <li>Enhanced security protocols and user authentication</li>
                            </ul>
                            <p>Looking ahead to Q2, we should focus on user experience improvements and expanding our integration capabilities. I've attached the detailed project roadmap for your review.</p>
                            <p>Best regards,<br>Jane</p>
                          </div>
                          
                          <div class="attachment">
                            <div class="attachment-header">
                              <p>
                                <span><i class="fas fa-paperclip"></i> 3 attachments — </span>
                                <a href="#" class="text-primary">Download all attachments</a> |
                                <a href="#" class="text-primary">View all images</a>
                              </p>
                            </div>
                            <div class="row">
                              <div class="col-md-4">
                                <div class="attachment-item">
                                  <a href="#" class="atch-thumb">
                                    <img src="images/inbox.png" alt="Q2 Roadmap" class="img-fluid rounded" />
                                  </a>
                                  <div class="file-name">Q2_Project_Roadmap.pdf</div>
                                  <span class="file-size badge bg-light text-dark">245KB</span>
                                  <div class="links mt-2">
                                    <a href="#" class="btn btn-sm btn-outline-primary">View</a>
                                    <a href="#" class="btn btn-sm btn-outline-secondary">Download</a>
                                  </div>
                                </div>
                              </div>
                              
                              <div class="col-md-4">
                                <div class="attachment-item">
                                  <a href="#" class="atch-thumb">
                                    <img src="images/inbox.png" alt="Analytics Report" class="img-fluid rounded" />
                                  </a>
                                  <div class="file-name">Analytics_Report_Q1.xlsx</div>
                                  <span class="file-size badge bg-light text-dark">180KB</span>
                                  <div class="links mt-2">
                                    <a href="#" class="btn btn-sm btn-outline-primary">View</a>
                                    <a href="#" class="btn btn-sm btn-outline-secondary">Download</a>
                                  </div>
                                </div>
                              </div>
                              
                              <div class="col-md-4">
                                <div class="attachment-item">
                                  <a href="#" class="atch-thumb">
                                    <img src="images/inbox.png" alt="Team Schedule" class="img-fluid rounded" />
                                  </a>
                                  <div class="file-name">Team_Schedule_Q2.png</div>
                                  <span class="file-size badge bg-light text-dark">95KB</span>
                                  <div class="links mt-2">
                                    <a href="#" class="btn btn-sm btn-outline-primary">View</a>
                                    <a href="#" class="btn btn-sm btn-outline-secondary">Download</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                          <div class="btn-group mt-4" role="group" aria-label="Email reply actions">
                            <button class="btn btn-sm btn-primary" type="button"><i class="fas fa-reply"></i> Reply</button>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-placement="top" data-bs-toggle="tooltip" title="Forward"><i class="fas fa-share"></i></button>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-placement="top" data-bs-toggle="tooltip" title="Print"><i class="fas fa-print"></i></button>
                            <button class="btn btn-sm btn-outline-danger" type="button" data-bs-placement="top" data-bs-toggle="tooltip" title="Delete"><i class="fas fa-trash"></i></button>
                          </div>
                        </div>
                      </div>
                      <!-- /CONTENT MAIL -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="float-end">
            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>

    <!-- compose modal -->
    <div class="compose col-md-6 col-lg-4">
      <div class="compose-header">
        <div class="d-flex justify-content-between align-items-center">
          <h5 class="mb-0"><i class="fas fa-envelope"></i> New Message</h5>
          <button type="button" class="btn-btn-close compose-btn-btn-close" aria-label="Close"></button>
        </div>
      </div>

      <div class="compose-body">
        <div id="alerts"></div>
        
        <form class="compose-form">
          <div class="mb-3">
            <label for="email-to" class="form-label">To:</label>
            <input type="email" class="form-control" id="email-to" placeholder="recipient@example.com">
          </div>
          
          <div class="mb-3">
            <label for="email-subject" class="form-label">Subject:</label>
            <input type="text" class="form-control" id="email-subject" placeholder="Enter subject">
          </div>

          <div class="btn-toolbar editor mb-3" data-role="editor-toolbar" data-bs-target="#editor">
            <div class="btn-group btn-group-sm me-2">
              <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" title="Font">
                <i class="fas fa-font"></i>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" data-edit="fontName Arial">Arial</a></li>
                <li><a class="dropdown-item" href="#" data-edit="fontName Georgia">Georgia</a></li>
                <li><a class="dropdown-item" href="#" data-edit="fontName Times">Times</a></li>
              </ul>
            </div>

            <div class="btn-group btn-group-sm me-2">
              <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" title="Font Size">
                <i class="fas fa-text-height"></i>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" data-edit="fontSize 5">Huge</a></li>
                <li><a class="dropdown-item" data-edit="fontSize 3">Normal</a></li>
                <li><a class="dropdown-item" data-edit="fontSize 1">Small</a></li>
              </ul>
            </div>

            <div class="btn-group btn-group-sm me-2">
              <button type="button" class="btn btn-outline-secondary" data-edit="bold" title="Bold"><i class="fas fa-bold"></i></button>
              <button type="button" class="btn btn-outline-secondary" data-edit="italic" title="Italic"><i class="fas fa-italic"></i></button>
              <button type="button" class="btn btn-outline-secondary" data-edit="underline" title="Underline"><i class="fas fa-underline"></i></button>
            </div>

            <div class="btn-group btn-group-sm me-2">
              <button type="button" class="btn btn-outline-secondary" data-edit="insertunorderedlist" title="Bullet list"><i class="fas fa-list-ul"></i></button>
              <button type="button" class="btn btn-outline-secondary" data-edit="insertorderedlist" title="Number list"><i class="fas fa-list-ol"></i></button>
            </div>

            <div class="btn-group btn-group-sm me-2">
              <button type="button" class="btn btn-outline-secondary" data-edit="justifyleft" title="Align Left"><i class="fas fa-align-left"></i></button>
              <button type="button" class="btn btn-outline-secondary" data-edit="justifycenter" title="Center"><i class="fas fa-align-center"></i></button>
              <button type="button" class="btn btn-outline-secondary" data-edit="justifyright" title="Align Right"><i class="fas fa-align-right"></i></button>
            </div>

            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-secondary" data-edit="undo" title="Undo"><i class="fas fa-undo"></i></button>
              <button type="button" class="btn btn-outline-secondary" data-edit="redo" title="Redo"><i class="fas fa-redo"></i></button>
            </div>
          </div>

          <div id="editor" class="editor-wrapper form-control" contenteditable="true" style="min-height: 200px;">
            <p>Type your message here...</p>
          </div>
        </form>
      </div>

      <div class="compose-footer">
        <div class="d-flex justify-content-between">
          <div>
            <input type="file" id="attach-file" class="d-none" multiple>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="document.getElementById('attach-file').click()">
              <i class="fas fa-paperclip"></i> Attach
            </button>
          </div>
          <div>
            <button type="button" class="btn btn-sm btn-outline-secondary me-2">Draft</button>
            <button id="send" class="btn btn-sm btn-success" type="button">
              <i class="fas fa-paper-plane"></i> Send
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- /compose modal -->
    
    <style>
      .mail-item {
        display: block;
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid #eee;
        transition: background-color 0.2s ease;
      }
      
      .mail-item:hover {
        background-color: #f8f9fa;
        text-decoration: none;
        color: inherit;
      }
      
      .mail-item.active {
        background-color: #e3f2fd;
        border-left: 3px solid #2196f3;
      }
      
      .mail_list {
        padding: 15px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      
      .mail_list .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        min-width: 30px;
      }
      
      .mail_list .right h3 {
        font-size: 14px;
        margin: 0 0 5px 0;
        font-weight: 600;
      }
      
      .mail_list .right p {
        font-size: 12px;
        color: #666;
        margin: 0;
        line-height: 1.4;
      }
      
      .email-subject {
        color: #333;
        font-size: 18px;
        font-weight: 600;
        margin: 15px 0;
      }
      
      .sender-info img {
        object-fit: cover;
      }
      
      .attachment-item {
        text-align: center;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
      }
      
      .attachment-item .atch-thumb img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        margin-bottom: 10px;
      }
      
      .file-name {
        font-size: 12px;
        font-weight: 600;
        margin: 5px 0;
        word-break: break-all;
      }
      
      .file-size {
        font-size: 10px;
      }
      
      .compose {
        position: fixed;
        bottom: 0;
        right: 20px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        display: none;
        min-width: 400px;
        max-width: 500px;
      }
      
      .compose-header {
        background: #f8f9fa;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        border-radius: 8px 8px 0 0;
      }
      
      .compose-body {
        padding: 20px;
        max-height: 500px;
        overflow-y: auto;
      }
      
      .compose-footer {
        padding: 15px;
        border-top: 1px solid #ddd;
        background: #f8f9fa;
      }
      
      .editor-wrapper {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 10px;
        min-height: 150px;
        background: white;
      }
      
      .btn-toolbar .btn-group {
        margin-bottom: 5px;
      }
      
      @media (max-width: 768px) {
        .compose {
          left: 10px;
          right: 10px;
          width: auto;
          min-width: auto;
        }
        
        .mail_list_column {
          margin-bottom: 20px;
        }
      }
    </style>
  </body>
</html>